import React from 'react';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import FilterItem from './FilterItem';
import styled from 'styled-components';

const FilterList = ({ list = [], sourceList = [], targetList = [], onChange }) => {
  const handleDelete = (index) => {
    const result = [...list];
    result.splice(index, 1);
    onChange(result);
  };

  const handleChange = (item, index) => {
    const result = [...list];
    result[index] = item;
    onChange(result);
  };

  const handleAdd = () => {
    const result = [...list];
    result.push({});
    onChange(result);
  };

  return (
    <StylesWrap className="filter-list">
      {list.map((item, index) => (
        <FilterItem
          key={index}
          item={item}
          sourceList={sourceList}
          targetList={targetList}
          onDelete={() => handleDelete(index)}
          onChange={(newItem) => handleChange(newItem, index)}
        />
      ))}
      <Button onClick={handleAdd} icon={<PlusOutlined />}>
        且条件
      </Button>
    </StylesWrap>
  );
};

const StylesWrap = styled.div`
&.filter-list {
  border: 1px solid #326394;
  background-color: #002146;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
`

export default FilterList; 